import React ,{ useState, useEffect, useRef } from 'react'
import { Steps , Select} from 'antd'
import '../comm.css'
import MultiSelect from '@/pages/QuotaManage/GmApproval/multiSelect';
import { http } from '@/lib';
import apis from '@/apis/AboutQuota';


const { Option } = Select;
const { Step } = Steps;
const deleteimg = require('@/assets/delete.png')
const brandCode = JSON.parse(sessionStorage.getItem('UaaSysInfo'))?.profile?.brandCode[0]
const brandListes = JSON.parse(sessionStorage.getItem('UaaSysInfo'))?.profile?.brandList
const brandName = JSON.parse(sessionStorage.getItem('UaaSysInfo'))?.profile?.brandName[0]

const  MyModel = (props) =>{
    const [template, setTemplate] = useState([])
    const [person, setPerson] = useState([])
    const [selectcode, setSelectcode] = useState([])
    const [currentSelectPerson, setCurrentSelectPerson] = useState(-1)

    const childRef:any = useRef();
    useEffect(() => {
      hangetorg()
    }, [props.rows])
    useEffect(() => {
      let selectcode = brandListes.filter(item=>item.brandCode==props.code)
       setSelectcode(selectcode)
    }, [props.code])
    
     const hangetorg = () =>{
       http.get(apis.orgtemplate,{params:{brandCode}}).then(resp=>{
          setTemplate(resp.data)
          let temp = JSON.stringify(resp.data)
          sessionStorage.setItem('role',temp)
          sessionStorage.setItem('template',temp)

       })
    }

    const  handelshowGM = (index) =>{ //审核model
      // childRef.current
         childRef.current.handelCeck(index)
         setCurrentSelectPerson(index)
    }
    const handelgetperson = (value) =>{
      if(currentSelectPerson == -1) return

      let data = [...person]
      data[currentSelectPerson] = value
      sessionStorage.setItem('person', JSON.stringify(data))
      setPerson(data)
   }
   const handelDelite = (index: number, id: any) =>{

    let data = [...person]

    const curr = data[index].filter((a: any) => a.id !== id)

    data[index] = curr
    // data.splice(index, 1)
    sessionStorage.setItem('person', JSON.stringify(person))
    setPerson(data)
    setCurrentSelectPerson(index)
 }
  return(
    <div className="sp-person">
      选择审批人：
      <div className="Step_model">
        <Steps progressDot current={0} direction="vertical">
          {
            template.map((item,index)=>(
              <Step key={index} title={item.name} />
            ))
          }
        </Steps>
        <div>
          {
            template.map((item,index)=>(
              <div className="waper-check" key={index}>
                {
                  person[index] && person[index].map((resp: any) => (
                    <div className="crli_tname" key={resp.id}>
                      <img src={deleteimg}  className="deleteimg" onClick={()=>handelDelite(index, resp.id)} />
                      {resp.realName}
                    </div>
                  ))
                }
                <div className="crli_model"  onClick={()=>handelshowGM(index)}>+</div>
              </div>
            ))
          }
            <MultiSelect
              cRef={childRef}
              handelcilck={handelgetperson}
            />
        </div>
      </div>
    </div>
  )
}
const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log(`selected ${value}`);
}

export default MyModel
